<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>001</td>
                <td>张三</td>
                <td>男</td>
                <td>19</td>
                <td>2301</td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>男</td>
                <td>28</td>
                <td>2302</td>
            </tr>
            <tr>
                <td>003</td>
                <td>王五</td>
                <td>男</td>
                <td>22</td>
                <td>2303</td>
            </tr>
             -->
        </tbody>
    </table>
    <script>
        // var str = '';
        // var arrs = ['hello','world','!'];
        // for(var i=0;i<arrs.length;i++){
        //     str+=arrs[i]
        // }
        // console.log(str);

        var persons = [
            {id:1,name:'张三',age:19,gender:'男',classroom:'2301'},
            {id:2,name:'李四',age:21,gender:'女',classroom:'2302'},
            {id:3,name:'王五',age:23,gender:'女',classroom:'2303'}
        ]
        var str = '';
        for(var i=0;i<persons.length;i++){
            str +=`
            <tr>
                <td>${persons[i].id}</td>
                <td>${persons[i].name}</td>
                <td>${persons[i].gender}</td>
                <td>${persons[i].age}</td>
                <td>${persons[i].classroom}</td>
            </tr> 
            `
        }

        console.log(str);


        document.querySelector('tbody').innerHTML = str

        
    </script>
</body>
</html>